<template>
  <div id="home">
    <van-nav-bar id="title" title="创业平台" />

    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item>
        <img src="../assets/img/banner1.png" alt="" />
      </van-swipe-item>
      <van-swipe-item>
        <img src="../assets/img/banner2.png" alt="" />
      </van-swipe-item>
      <van-swipe-item>
        <img src="../assets/img/banner3.png" alt="" />
      </van-swipe-item>
    </van-swipe>

    <van-grid class="naver" :border="false">
      <van-grid-item v-for="(icon, index) in icons" :key="index">
        <img :src="icon" />
        <p>{{ titles[index] }}</p>
      </van-grid-item>
    </van-grid>

    <div class="gap"></div>

    <van-tabs color="blue">
      <van-tab v-for="type in newsall" :key="type.id" :title="type.name">
        <router-link
          tag="div"
          :to="'/newsdetail/' + item.id"
          v-for="item in type.content"
          :key="item.id"
        >
          <van-row>
            <van-col span="16">
              <h4>{{ item.title }}</h4>
              <p>{{ item.create_time }}</p>
            </van-col>
            <van-col span="8">
              <van-image width="100%" height="80%" :src="uploads + item.img" />
            </van-col>
          </van-row>
        </router-link>
      </van-tab>
    </van-tabs>
    <bottom :active="0"></bottom>
  </div>
</template>

<script>
import { mapState } from "vuex";
import axios from "axios";
import bottom from "@/components/bottom.vue";

export default {
  components: { bottom },
  data() {
    return {
      newslist: [],
      newsall: [],
    };
  },
  computed: {
    // ...mapState(['badge'])
    ...mapState({
      icons: (state) => state.badge.icons,
      titles: (state) => state.badge.titles,
      uploads: (state) => state.uploads,
    }),
  },
  created() {
    axios.get("/api/news/newsall.html").then((res) => {
      var data = res.data;
      var json = eval("(" + data + ")");
      this.newsall = json.data;
    });
    console.log("created");
  },
  mounted() {
    console.log("mounted");
  },
};
</script>

<style lang="scss" scoped>
>>> .van-nav-bar__title {
  font-size: 20px;
}
.my-swipe img {
  width: 100%;
  height: 350px;
}
.naver img {
  width: 55px;
}
>>> .van-grid-item__content {
  padding: 1px;
}
.gap {
  height: 1px;
  background-color: darkgray;
}
>>> .van-tabs__content {
  padding: 0 15px;
  margin-bottom: 50px;
}
>>> .van-row {
  border-bottom: 1px solid lightgray;
}
>>> .van-image__img {
  margin: 5px;
}
</style>